<!DOCTYPE html>
<html>
  <head>
    <?php
    include '../connectDB.php';
    $strSQL = "SELECT * FROM tbl_item WHERE mer_id = '1' ";
    $objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
    $mer_id = '1';
    ?>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script src="../js/jquery-1.9.1.js"></script>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrES1n4h0Fk1agKt-3WAMS16ollUl1lfk">
    </script>
    <script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
          type: "POST",
          url: "mapservice.php",
          // The key needs to match your method's input parameter (case-sensitive).
          data: {function:'get_latlon'} ,
          //contentType: "application/json; charset=utf-8",
          dataType: "text",
        }
        ).done( function(data){
          var obj = jQuery.parseJSON(data);
          var myLatlng = new google.maps.LatLng(13.742657,100.561777);
          var mapOptions = {
            zoom: 14,
            center: myLatlng
          }
          var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
          for(var i=0;i<obj.length;i++){
            var myLatlng = new google.maps.LatLng(obj[i].latitude,obj[i].longtitude);
            var marker = [] ;
            marker = new google.maps.Marker({
                position: myLatlng ,
                map: map,
                title: obj[i].mer_name,
                id:obj[i].mer_id
            });

            marker.setMap(map);
            google.maps.event.addListener(marker, 'click', function() {
              //var select = '<select ><option value="1">one</option><option value="2">two</option></select>';
              var link ='<a href="../vendingsale1.php?MerID='+this.id+'">vending sale</a>'
              var contentString = '<div id="content">'+
                  '<div id="siteNotice">'+
                  '</div>'+
                  '<h1 id="firstHeading" class="firstHeading">'+this.title+'</h1>'+link
                  '<div id="bodyContent">'+
                  '<p><b>Uluru</b></p>'+
                  '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
                  'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
                  '(last visited June 22, 2009).</p>'+'<input type="text"/>'
                  '</div>'+
                  '</div>';
              var infowindow = new google.maps.InfoWindow({
                  content: contentString
              });
                infowindow.open(map,this);
                //alert(obj[0].mer_name);
                //alert(this.id);
            });
          }

          });

    });
      function initialize() {
        /*
        var myLatlng = new google.maps.LatLng(13.742657,100.561777);
        var mapOptions = {
          zoom: 14,
          center: myLatlng
        }
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        var contentString = '<div id="content">'+
          '<div id="siteNotice">'+
          '</div>'+
          '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
          '<div id="bodyContent">'+
          '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
          'sandstone rock formation in the southern part of the '+
          'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
          'south west of the nearest large town, Alice Springs; 450&#160;km '+
          '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
          'features of the Uluru - Kata Tjuta National Park. Uluru is '+
          'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
          'Aboriginal people of the area. It has many springs, waterholes, '+
          'rock caves and ancient paintings. Uluru is listed as a World '+
          'Heritage Site.</p>'+
          '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
          'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
          '(last visited June 22, 2009).</p>'+
          '</div>'+
          '</div>';

          var infowindow = new google.maps.InfoWindow({
              content: contentString
          });

         marker = new google.maps.Marker({
            position: myLatlng,
            draggable:true,
            animation: google.maps.Animation.DROP,
            title:"Hello World!"
          });
        marker.setMap(map);
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
            //alert('aaa');
        });

    }

      google.maps.event.addDomListener(window, 'load', initialize);


      function remove_marker(){
        marker.setMap(null);
*/
      }
    </script>
  </head>
  <body>
    <input type="button" value="remove maker" onclick="remove_marker()"/>
    <div id="map-canvas"/>
  </body>
</html>
